import React, {useEffect, useState} from "react";
import {Form, Input, Modal, Button, Row, Col, Spin, message} from "antd";
import './index.scss'
import {getMsg} from "@/common/apis";

const TableList: React.FC<any> = () => {
  const [searchForm] = Form.useForm();
  const [pageData, setPageData] = useState({page: 1});
  const [tableData, setData] = useState([]);
  const [tableCol, setCol] = useState([]);
  const [load, setLoad] = useState(false);
  const [total, setTotal] = useState(0);

  useEffect(() => {
    search();
  }, []);

  // 顶部搜索
  const search = (isSearch?: any) => {
    setPageData({page: 1});
    let data = searchForm.getFieldsValue();
    let params = {...data};
    if (!isSearch) {
      params = {...params, ...pageData};
    }
    getDataList(params);
  };

  // 添加列表
  const addList = () => {
    // form.validateFields().then((values) => {
    //   addMsg(values).then((res) => {
    //     if (res.status === 0) {
    //       form.resetFields();
    //       message.success(res.msg);
    //       setShow(false);
    //       search();
    //     }
    //   });
    // });
  };

  // 获取列表
  const getDataList = (data: any) => {
    getMsg(data).then((res) => {
      const {data, status} = res;
      if (status === 0) {
        let {list, total, mapKey} = data;
        mapKey = mapKey.map((i: any) => {
          if (i.key === "description") {
            i.width = 500;
          }
          return i;
        });
        setCol(mapKey);
        setTotal(total);
        setData(list.map((i: any) => ({...i, key: i.m_id})));
        setLoad(false);
        return;
      }
    });
  };

  return (
    <div className="search-container">
      <Spin spinning={load}>
        <div className="top-form">
          <Form layout="inline" form={searchForm}>
            <Form.Item name="name">
              <Input placeholder="输入消息名称"/>
            </Form.Item>
            <Form.Item name="description">
              <Input placeholder="输入消息描述词"/>
            </Form.Item>
            <Button onClick={search} type="primary" className="submit-btn">
              搜索
            </Button>
            <Button
              onClick={() => {
                searchForm.resetFields();
                search();
              }}
            >
              清空
            </Button>
          </Form>
        </div>

      </Spin>
    </div>
  );
}

export default TableList
